<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>添加用户名</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="__PUBLIC__/css/font.css">
    <link rel="stylesheet" href="__PUBLIC__/css/xadmin.css">
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
      .displaynone{
        display: none;
      }
    </style>
  </head>
  <body>
  <div class="x-body">
    <form class="layui-form" enctype="multipart/form-data" method="post" id="uploadForm">
      <div class="layui-form-item">
        <input type="file" name="image" id="image">
      </div>
      <div class="layui-form-item">
        <button  class="layui-btn" lay-filter="add" lay-submit="">
            开始上传
        </button>
      </div>
    </form>
  </div>
  </body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="__PUBLIC__/js/xadmin.js"></script>
<script type="text/javascript">
   layui.use(['form','layer'], function(){
          $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;

          form.on('submit(add)',function(){
              var pic = $('#image')[0].files[0];
              var fd = new FormData();
              fd.append('uploadFile', pic);
              $.ajax({
                  url:"{:U('add')}",
                  type:"post",
                  // Form数据
                  data: fd,
                  cache: false,
                  contentType: false,
                  processData: false,
                  success:function(data){
                      if(data.status == 1){
                        parent.$("#image").val('__UPLOAD__'+data.image);//提交的图片地址
                        parent.$("#img").attr('src','__ROOT__'+'__UPLOAD__'+data.image);//展示的图片地址
                        layer.msg('添加成功');
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引  
                        parent.layer.close(index);
                      }else{

                      }
                  }
              })
          })
  })
</script>
</html>